import React from 'react'
import './index.css'

export default function Footer({todoList,setTodoList}) {
  //全部数字直接拿数据的长度即可

  //已完成的数据就是所有数据里 done为true的那个,可以用累加p
  const getAllFinish = ()=>{

    //累加返回累加的数值,p是初始值
    //三元当对象里的done为true,则返回p+1
    return todoList.reduce((p,c)=>c.done? p+1 : p , 0 )
  }


  
  //默认全选是直接加属性:当已完成的等于数据长度就返回true全选，条件不满足返回false

  //点击全选，点击时新 数据的全部变成点击的布尔值
  const allChangeHandle = (e)=>{
    //获取点击时的布尔值
    // console.log(e.target.checked);
    const getChecked = e.target.checked;
    //遍历所有数据，并把数据都修改为点击的
     const allChangeCheck = todoList.map((item)=>{
      //修改数据尽量不直接修改数据  用...展开,修改每一项，返回一个新数组
      //浅拷贝返回新数据，react渲染才更新
        return  {...item,done:getChecked}
     })

     setTodoList(allChangeCheck)
  }

 const deleteTskHandle = ()=>{
  //用过滤返回done为flase的状态，取反为true就可以过滤出来为新数据
   const newTodoList = todoList.filter(item=>!item.done)
   setTodoList(newTodoList)
 }

  return (
    <div className="todo-footer">
    <label>
      <input type="checkbox" onChange={allChangeHandle} checked={getAllFinish() === todoList.length && todoList.length !== 0 }/>
    </label>
    <span>                    
      <span>已完成{getAllFinish()}</span> / 全部{todoList.length}
    </span>
    <button className="btn btn-danger" onClick={deleteTskHandle}>清除已完成任务</button>
  </div>
  )
}
